<template>
  <div>
    <!-- 顶部筛选条件-->
    <el-form :model="filterData">
      <el-row :gutter="20">
        <el-col style="width:120px">
          <el-form-item>
            <el-button type="primary" icon="el-icon-plus" @click="PopupAddDialog">添加渠道</el-button>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="渠道名称" label-width="80px">
            <el-input v-model="filterData.title" placeholder="请输入渠道名称" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="2">
          <el-button type="primary" icon="el-icon-search" @click="loadDataList">查询</el-button>
        </el-col>
      </el-row>
    </el-form>


    <!--数据表格-->
    <el-table :data="tableData" border style="min-height: calc(100vh - 200px)">
      <el-table-column prop="id" label="id" v-if="false"></el-table-column>
      <el-table-column type="index" label="序号" width="60" align="center"></el-table-column>
      <el-table-column prop="title" label="渠道名称" width="150"  align="center"></el-table-column>
      <el-table-column prop="enabled" label="启用状态" width="100" align="center">
        <template v-slot="scope">
          <span v-if="scope.row.enabled!=1" style="color:#FF0000">禁用</span>
      <span  v-if="scope.row.enabled==1" style="color:#008800">已启用</span>
        </template>
      </el-table-column>
      <el-table-column prop="rate" label="扣点" width="100" align="center">
        <template v-slot="scope">
          {{scope.row.rate}}%
        </template>
      </el-table-column>

      <el-table-column prop="memo" label="备注" show-overflow-tooltip ></el-table-column>
      <el-table-column prop="website" label="渠道链接" align="center">
        <template v-slot="scope">
          {{scope.row.website}}
        </template>
      </el-table-column>
      <el-table-column prop="info" label="渠道平台账号信息" align="center">
        <template v-slot="scope">
          {{scope.row.info}}
        </template>
      </el-table-column>
      <el-table-column prop="order" label="排序" align="center" width="80"></el-table-column>
      <el-table-column prop="createtime" label="添加时间" align="center" width="140px" show-overflow-tooltip></el-table-column>
      <el-table-column prop="" label="操作" align="center" width="120">
        <template slot-scope="scope">
          <el-button-group>
            <el-button size="mini" icon="el-icon-link" circle title="打开平台" v-if="scope.row.website.indexOf('http')!=-1" @click="openlink(scope.$index,scope.row)"></el-button>
            <el-button size="mini" icon="el-icon-edit-outline" circle title="编辑渠道信息"
              @click="handleEdit(scope.$index,scope.row)"></el-button>
            <el-button size="mini" type="danger" title="删除" circle icon="el-icon-delete"
              @click="handleDelete(scope.$index,scope.row)"></el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>

    <div style="margin-top: 10px; text-align: right;">
      <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[18, 25, 35]" :total="total" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    </div>


    <CreateUI v-if="createVisible" ref="createUI" @closeHandler="createCompleteCallback"></CreateUI>
    <EditUI v-if="editVisible" ref="editUI" @closeHandler="editCompleteCallback"></EditUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue';
  export default {
    components: {
      CreateUI,
      EditUI
    },
    data() {
      return {
        //分页相关
        curpage: 1,
        pagesize: 18,
        total: 1,
        filterData: {
          title: ''
        },
        platforms: [],
        tableData: [],
        createVisible: false,
        editVisible: false
      }
    },
    mounted() {
      this.loadDataList();
    },
    methods: {
      openlink: function(index,data) {
         window.open(data.website,"_blank");
      },
      loadDataList: function() {
        let params = {
          title: this.filterData.title,
          curpage: this.curpage,
          pagesize: this.pagesize
        }
        this.axios.post("/api/admin/platform/listall", params).then(res => {
          if (res.status == 200 && res.data.code == 0) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.curpage = res.data.curpage;
            this.pagesize = res.data.pagesize;
          }
        })
      },
      editCompleteCallback: function(index, data) {
        this.loadDataList();
      },
      createCompleteCallback: function(index, data) {
        this.loadDataList();
      },
      PopupAddDialog: function() {
        this.createVisible = true;
        this.$nextTick(() => {
          this.$refs.createUI.dialogVisible = true;
          this.$refs.createUI.initData();
        })
      },
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleDelete: function(index, row) {
        let confirmText = ["正在删除平台:", "平台名称:" + row.title];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
          newDatas.push(h('p', null, confirmText[i]));
        }
        this.$confirm("提示", {
          message: h('div', null, newDatas),
          confirmButtonText: "删除",
          cancelButtonText: "取消",
          type: 'error'
        }).then(() => {
          this.axios.post("/api/admin/platform/remove", {
            id: row.id
          }).then(res => {
            if (res.status == 200 && res.data.code == 0) {
              this.$message.success(res.data.msg, "提示");
              this.tableData.splice(index, 1);
            } else {
              this.$alert(res.data.msg, "提示", {
                type: "error"
              });
            }
          })
        }).catch(() => {})
      },
      handleEdit: function(index, row) {
        console.log(index, row);
        this.editVisible = true;
        this.$nextTick(() => {
          this.$refs.editUI.dialogVisible = true;
          this.$refs.editUI.initData(index, row);
        })
      }
    }
  }
</script>

<style>
</style>
